<template>
  <div class="container">
    <div class="page-top "></div>
    <view class="add_car" @click="onEditOrder" v-if="item.orderDetail.status < 2">
      <van-row>

        <van-col span="24">
          <view class="item_label">
            <text>修改订单</text>
          </view>
        </van-col>
      </van-row>
    </view>
    <div class="orderlist-detail">
      <div class="orderlist-detail-dz">
        <ul>
          <li>
            <div class="left"><p>出发</p></div>
            <div class="right">
              <h5>
                <span>{{ item.orderDetail.sendAddress.username }}</span>
                <em></em>
                <span>{{ item.orderDetail.sendAddress.phone }}</span>
              </h5>
              <p class="dot">
                {{ item.orderDetail.sendAddress.provinceInfo.text }}
                {{ item.orderDetail.sendAddress.cityInfo.text }}
                {{ item.orderDetail.sendAddress.address }}
              </p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left"><p style="background-color: #fddbda;">到达</p></div>
            <div class="right">
              <h5>
                <span>{{ item.orderDetail.targetAddress.username }}</span>
                <em></em>
                <span>{{ item.orderDetail.targetAddress.phone }}</span>
              </h5>
              <p class="dot">
                {{ item.orderDetail.targetAddress.provinceInfo.text }}
                {{ item.orderDetail.targetAddress.cityInfo.text }}
                {{ item.orderDetail.targetAddress.address }}
              </p>
            </div>
            <div style="clear: both"></div>
          </li>
        </ul>
      </div>

      <!-- 订单基本信息 -->
      <div class="orderlist-detail-ms">
        <ul>
          <li>
            <div class="left">
              <p>订单编号</p>
            </div>
            <div class="right">
              <p>{{ item.orderDetail.order_no }}</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>联系电话</p>
            </div>
            <div class="right">
              <p>{{ item.orderDetail.sendAddress.phone }}</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>宠物信息</p>
            </div>
            <div class="right">
              <p>{{ item.order_pet }}</p>
            </div>
            <div style="clear: both"></div>
          </li>

          <li>
            <div class="left">
              <p>本单积分</p>
            </div>
            <div class="right">
              <p>{{ item.orderDetail.order_score }}</p>
            </div>
            <div style="clear: both"></div>
          </li>
          <li>
            <div class="left">
              <p>订单创建时间</p>
            </div>
            <div class="right">
              <p>{{ item.create_time }}</p>
            </div>
            <div style="clear: both"></div>
          </li>
        </ul>
      </div>

      <!-- 订单进度 -->
      <van-cell-group title="订单进度">


        <van-steps
          :steps="traceSteps"
          :active="traceActive"
          direction="vertical"
        />
      </van-cell-group>

      <!-- 检疫证信息 -->
      <van-cell-group title="检疫证信息">
        <van-cell title="检疫证号码" :value="item.health_no"/>

        <van-cell
          :title="'检疫证图片'+(index+1)" v-for="(item,index) in item.orderDetail.healthPhotosList"
          :key="index"
          @click="showImg(item.photo)"
        >
          <van-image
            width="100"
            height="100"
            lazy-load
            :src="item.photo"
          />
        </van-cell>
      </van-cell-group>


      <!-- 宠物信息 -->
      <van-cell-group title="宠物信息" v-if="item.orderDetail.petList.length > 0">
        <view v-for="(item,index) in item.orderDetail.petList">
          <van-cell title="姓名" :value="item.pet_name"/>
          <van-cell title="宠物类型" :value="item.type_name"/>
          <van-cell title="品种" :value="item.breed"/>

          <van-cell
            title="宠物照片"
            :key="index"
            @click="showImg(item.photo)"
          >
            <van-image
              width="100"
              height="100"
              lazy-load
              :src="item.img"
            />
          </van-cell>
        </view>
      </van-cell-group>


    </div>

    <van-popup :show="imgShow" @close="onImgShowClose">
      <van-image
        width="10rem"
        height="10rem"
        fit="contain"
        :src="imgSrc"
      />

    </van-popup>

    <!-- 编辑订单的窗口 -->
    <van-popup :show="editShow" @close="onEditShowClose" :custom-style="custom_style">
      <van-cell-group title="订单信息">
        <van-cell title="订单号" :value="item.orderDetail.order_no"></van-cell>
        <van-cell title="上传订单图片">
          <van-image width="100" height="100" @click="onUploadImg" :src="tmpl_img"/>
        </van-cell>
        <van-cell title="图片描述">
          <input type="text" placeholder="头程图片/尾程图片" v-model="postField.order_img_desc">
        </van-cell>

        <van-cell title="订单状态" :value="orderStatusText" is-link @click="transformShow = true"></van-cell>
      </van-cell-group>

      <van-button type="primary" block custom-class="formSubmit" @click="updateOrderDetail">保存</van-button>
    </van-popup>


    <!-- 订单流转状态 -->
    <van-popup

      :show="transformShow"
      @close="onTransformShowClose"
      round
      position="bottom"
    >
      <van-picker
        show-toolbar
        :columns="statusList"
        @cancel="onTransformShowClose"
        @confirm="onOrderStatusConfirm"
      />
    </van-popup>
    <van-dialog id="van-dialog"/>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import {getOrder, updateOrder} from "../../../../requests/merchant/order";
import {clearObjectValues, doResponse, uploadImg} from "../../../../requests/tools";
import Dialog from "../../../../../static/vant/dialog/dialog";


var $this
export default {
  name: "index",
  data() {
    // 这里存放数据
    return {
      custom_style: `width: 95%;
                     padding: 25px;
                     color: white;
                     background-size: cover;
                     border-radius: 20px;
                     `,
      item: {},
      imgShow: false,
      imgSrc: "https://img.yzcdn.cn/vant/cat.jpeg",
      editShow: false,
      tmpl_img: "",
      orderStatusText: '待运输',
      transformShow: false,
      statusList: ['待运输', '运输中', '已完成', '问题单'],
      postField: {
        business_id: "",
        order_id: "",
        order_img: "",
        order_img_desc: "",
        order_status: 0,
      },
      collapseActive: 1,
      traceSteps: [],
      traceActive: 0,
    }
  },
  components: {},
  props: {},
  // 方法集合
  methods: {
    initPage(id) {
      getOrder(id).then(res => {
        $this.item = res.data
        $this.initSteps()
      })
    },
    /**
     * 显示图片
     * @param src
     */
    showImg(src) {
      $this.imgShow = true;
      $this.imgSrc = src;
    },
    onImgShowClose() {
      $this.imgShow = false;
    },
    onEditShowClose() {
      $this.editShow = false;
    },
    onEditOrder() {
      $this.editShow = true;
    },
    onTransformShowClose() {
      $this.transformShow = false;
    },
    /**
     * 图片上传
     * @param event
     */
    onUploadImg(event) {
      uploadImg($this);
      let intv = setInterval(() => {
        if ($this.tmpl_img) {
          $this.postField.order_img = $this.tmpl_img
          clearInterval(intv)
        }
      }, 1000)
    },

    onOrderStatusConfirm(e) {
      let statusObj = e.mp.detail
      $this.postField.order_status = statusObj.index
      $this.postField.order_status_text = statusObj.value;
      $this.orderStatusText = statusObj.value
      $this.transformShow = false;
    },
    /**
     * 更新订单详情
     */
    updateOrderDetail() {
      $this.postField.business_id = $this.item.id;
      $this.postField.order_id = $this.item.orderDetail.id;
      $this.postField.order_status_text = $this.statusList[$this.postField.order_status];
      $this.postField.event = 'merchant_transform'
      if (!$this.postField.order_img) {
        Dialog.alert({message: "请上传图片"});
        return;
      }
      if (!$this.postField.order_img_desc) {
        Dialog.alert({message: "请输入描述"});
        return false;
      }

      let _updateOrder = () => {
        updateOrder($this.postField.order_id, $this.postField).then(res => {
          doResponse(res)
          $this.postField = clearObjectValues($this.postField)
          $this.onEditShowClose();
          $this.tmpl_img = "";
        })
      }
      if ($this.postField.order_status === 2) {
        Dialog.confirm({
          message: "订单流转为【已完成】则无法逆转，请确认操作",
        }).then(() => {
          _updateOrder()
        })
      } else {
        _updateOrder();
      }
      // todo 页面追加 流转记录的 步骤条

    },
    /**
     * 初始化步骤条
     */
    initSteps() {
      let traceLogs = $this.item.orderDetail.traceLogs
      $this.traceSteps = [];
      // 转换步骤条
      $this.traceSteps.push({
        text: "订单编号：" + $this.item.orderDetail.order_no,
        desc: "创建时间：" + $this.item.orderDetail.create_time
      });
      for (let i = 0; i < traceLogs.length; i++) {
        let traceItem = traceLogs[i];
        $this.traceSteps.push(
          {
            text: traceItem['op_log'],
            desc: traceItem['update_time']
          }
        )
      }
      $this.traceActive = $this.traceSteps.length - 1;
    }
  },

  created() {
    $this = this;
  },
  onLoad(options) {

    this.initPage(options.orderId)
  }
}
</script>

<style>
@import "index.css";

.formSubmit {
  margin: 20px 0 0;
}
</style>
